
{include file="layout/css"}
{include file="layout/header"}
<div class="layui-container fly-marginTop fly-user-main">
    <div class="layui-side-scroll light-theme">
    <ul class="layui-nav layui-nav-tree laytp-nav-tree laytp-nav-doc" style="width: 200px;" lay-filter="user">
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">个人中心</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:void(0);" id="myHome"><i class="layui-icon">&#xe609;</i>我的主页</a></dd>
                <dd ><a href="userForum.html"><i class="layui-icon">&#xe612;</i>我的帖子</a></dd>
                <dd class="layui-this"><a href="userSet.html"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
                <dd ><a href="userMessage.html"><i class="layui-icon">&#xe611;</i>我的消息</a></dd>
            </dl>
        </li>
    </ul>
</div>

    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title" id="LAY_mine">
                <li class="layui-this" lay-id="info">我的资料</li>
                <li lay-id="avatar">头像</li>
                <li lay-id="pass">密码</li>
            </ul>
            <div class="layui-tab-content" style="padding: 20px 0;">
                <div class="layui-form layui-form-pane layui-tab-item layui-show" id="setHtmlNode">

                </div>

                <div class="layui-form layui-form-pane layui-tab-item">
                    <style>
                        .choose_icon .list-inline {
                            padding-left: 0;
                            list-style: none;
                            margin-left: -5px;
                        }

                        .choose_icon .list-inline > li {
                            display: inline-block;
                            padding-left: 5px;
                            padding-right: 5px;
                        }

                        .choose_icon ul {
                            margin: 5px 0 0 0;
                        }

                        .choose_icon ul li {
                            width: 50px;
                            height: 50px;
                            line-height: 46px;
                            border: 1px solid #efefef;
                            padding: 1px;
                            margin: 1px;
                            text-align: center;
                            font-size: 18px;
                        }

                        .choose_icon ul li:hover {
                            border: 1px solid red;
                            cursor: pointer;
                        }

                        .choose_icon ul .active {
                            border: 1px solid red;
                            cursor: pointer;
                        }
                    </style>
                    <div class="layui-form-item">
                        <label for="password" class="layui-form-label">选择头像</label>
                        <div class="layui-input-block">
                            <div class="choose_icon">
                                <div id="chooseAvatarHtmlNode">
                                    <ul class="list-inline">
                                        <li class="active"><img src="../static.laytp.com/admin/images/avatar.jpg" class="check_avatar" data-id="0" width="50px" height="50px" /></li>
                                        <li><img src="../static.laytp.com/avatar/1.jpg" class="check_avatar" data-id="1" width="50px" height="50px" /></li>
                                        <li><img src="../static.laytp.com/avatar/2.jpg" class="check_avatar" data-id="2" width="50px" height="50px" /></li>
                                        <li><img src="../static.laytp.com/avatar/3.jpg" class="check_avatar" data-id="3" width="50px" height="50px" /></li>
                                        <li><img src="../static.laytp.com/avatar/4.jpg" class="check_avatar" data-id="4" width="50px" height="50px" /></li>
                                        <li><img src="../static.laytp.com/avatar/5.jpg" class="check_avatar" data-id="5" width="50px" height="50px" /></li>
                                        <li><img src="../static.laytp.com/avatar/6.jpg" class="check_avatar" data-id="6" width="50px" height="50px" /></li>
                                        <li><img src="../static.laytp.com/avatar/7.jpg" class="check_avatar" data-id="7" width="50px" height="50px" /></li>
                                        <li><img src="../static.laytp.com/avatar/8.jpg" class="check_avatar" data-id="8" width="50px" height="50px" /></li>
                                        <li><img src="../static.laytp.com/avatar/9.jpg" class="check_avatar" data-id="9" width="50px" height="50px" /></li>
                                        <li><img src="../static.laytp.com/avatar/10.jpg" class="check_avatar" data-id="10" width="50px" height="50px" /></li>
                                        <li><img src="../static.laytp.com/avatar/11.jpg" class="check_avatar" data-id="11" width="50px" height="50px" /></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-primary editAvatar" lay-filter="editAvatar" lay-submit>确认修改</button>
                    </div>
                </div>

                <div class="layui-form layui-form-pane layui-tab-item">
                    <form method="post">
                        <div class="layui-form-item">
                            <label for="password" class="layui-form-label">当前密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="password" name="password" lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="new_password" class="layui-form-label">新密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="new_password" name="new_password" lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">6到30个字符</div>
                        </div>
                        <div class="layui-form-item">
                            <label for="re_new_password" class="layui-form-label">确认新密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="re_new_password" name="re_new_password" lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn layui-btn-primary editPwdBtn" lay-filter="editPwd" lay-submit>确认修改</button>
                        </div>
                    </form>
                </div>
                <div class="fly-footer">
    <p><a href="index.html" target="_blank">Laytp 社区</a> <span id="footerFullYear">2021</span> © <a href="index.html" target="_blank">laytp.com 出品</a> <script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1279057869'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D1279057869%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script></p>
    <script>
        layui.use([],function(){
            var date = new Date();
            var fullYear = date.getFullYear();
            layui.$("#footerFullYear").html(fullYear);
        });
    </script>
</div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="setTemplate">
    <form method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" readonly="readonly" id="username" value="{{d.username}}" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">用于登录，不允许修改</div>
        </div>
        <div class="layui-form-item">
            <label for="nickname" class="layui-form-label">昵称</label>
            <div class="layui-input-inline">
                <input type="text" readonly="readonly" id="nickname" lay-verify="required" autocomplete="off" value="{{d.nickname}}" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">用于发帖展示，不允许修改</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="radio" name="sex" {{# if(d.sex==1){ }}checked="checked"{{# } }} value="1" title="男">
                    <input type="radio" name="sex" {{# if(d.sex==2){ }}checked="checked"{{# } }} value="2" title="女">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="email" class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" id="email" name="email" lay-verify="email" autocomplete="off" value="{{d.email}}" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">用于找回密码，如果没有激活，请发送激活邮件后进入自己的邮箱点击激活链接</div>
        </div>
        <div class="layui-form-item">
            <label for="address" class="layui-form-label">城市</label>
            <div class="layui-input-inline">
                <input type="text" id="address" name="address" autocomplete="off" value="{{d.address}}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label for="sign" class="layui-form-label">签名</label>
            <div class="layui-input-block">
                <textarea placeholder="随便写些什么刷下存在感" id="sign" name="sign" autocomplete="off" class="layui-textarea" style="height: 80px;">{{d.sign}}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-primary setBtn" lay-filter="set" lay-submit>确认修改</button>
        </div>
    </form>
</script>

<script type="text/html" id="chooseAvatarTemplate">
    <ul class="list-inline">
        <li {{# if(d.avatar == 0){ }}class="active"{{# } }}><img src="/admin/images/avatar.jpg" class="check_avatar" data-id="0" width="50px" height="50px" /></li>
        {{# for(var i=1;i<=11;i++){ }}
        <li {{# if(d.avatar == i){ }}class="active"{{# } }}><img src="/avatar/{{i}}.jpg" class="check_avatar" data-id="{{i}}" width="50px" height="50px" /></li>
        {{# } }}
    </ul>
</script>

<script>
    layui.use(['facade', 'context', 'button'],function(){
        const $ = layui.$;
        facade.checkLogin();
        // 渲染资料
        var user = layui.context.get("user");
        layui.laytpl($("#setTemplate").html()).render(user, function(string){
            $("#setHtmlNode").html(string);
            layui.form.render();
        });

        // 渲染头像
        layui.laytpl($("#chooseAvatarTemplate").html()).render(user, function(string){
            $("#chooseAvatarHtmlNode").html(string);
            layui.form.render();
        });

        $("#myHome").attr('href', facade.getWWWDomain() + "/user/" + user.nickname + ".html");
        $("#avatar").attr('src', user.avatar_file.path);

        // 编辑资料
        layui.form.on('submit(set)', function(data){
            var setBtnAnim = layui.button.load({elem:".setBtn"});
            facade.ajax({
                route:"/user/set",
                data:data.field
            }).done(function(res){
                if(res.code === 0){
                    setBtnAnim.stop();
                    layui.context.put('user', res.data);
                }
            });
            return false;
        });
        // 修改密码
        layui.form.on('submit(editPwd)', function(data){
            var editPwdBtnAnim = layui.button.load({elem:".editPwdBtn"});
            facade.ajax({
                route:"/user/editPwd",
                data:data.field
            }).done(function(res){
                if(res.code === 0){
                    editPwdBtnAnim.stop();
                    facade.alert('密码修改成功，请重新登录', '操作提示', function(){
                        localStorage.removeItem('user');
                        top.location.href = facade.getWWWDomain()+'/login.html';
                    });
                }
            });
            return false;
        });

        // 选择头像
        var checkAvatarId = user.avatar_file.id;
        $(document).off("click", ".check_avatar").on("click", ".check_avatar", function () {
            $("li", $('.choose_icon')).removeClass('active'); // 取消所有的选中效果
            $(this).parent().addClass('active'); // 选中当前点击的
            checkAvatarId = $(this).data('id');
        });

        // 确认修改头像
        $(document).off("click", ".editAvatar").on("click", ".editAvatar", function () {
            var setBtnAnim = layui.button.load({elem:".editAvatar"});
            facade.ajax({
                route:"/user/editAvatar",
                data:{'avatar': checkAvatarId},
                successAlert:false
            }).done(function(res){
                if(res.code === 0){
                    setBtnAnim.stop();
                    facade.alert('头像修改成功', '操作提示', function(){
                        setBtnAnim.stop();
                        layui.context.put('user', res.data);
                        top.location.reload();
                    });
                }
            });
        });

        // 确认修改头像
        // facade.ajax({
        //
        // });

        // layui.upload.render({
        //     elem: '.upload-img',
        //     url: facade.url('/user/set_avatar',{'accept':'images'}),
        //     accept: 'images',
        //     multiple: false,
        //     before: function (obj) {
        //         layer.msg('上传中...', {
        //             icon: 16,
        //             shade: 0.01,
        //             time: 0
        //         });
        //     },
        //     done:function(res){
        //         layer.close(layer.msg());//关闭上传提示窗口
        //         if (res.code == 0) {
        //             return layer.msg(res.msg + ":" + res.data.data);
        //         }else{
        //             $('#avatar').attr('src',res.data.data);
        //         }
        //     }
        // });
    });
</script>